<link href="/css/pagination.css" media="all" rel="stylesheet" type="text/css" />
<div id="page">
    <% if(session[:user]) != nil %>
    <div class="mod-note-button">
        <input type="button" id="btnAllDoc" class="btn btn-mini btn-info" value="文档列表" onclick="location.href='/doc/';" />
        <input type="button" class="btn btn-mini btn-info" value="我的便笺" onclick="location.href='/memo/';" />
    </div>
    <% end %>
    <div class="mod-note-title">
        <h1>用户反馈</h1>
    </div>
    <div class="content">

        <p style="color:#6600CC;">亲爱的，如果您有什么建议，请在下方留言。
        <br/>希望每一位朋友都可以提出一二个宝贵意见，因为您的言语就是小站发展的方向。
        <br/>每一位朋友都是产品经理哈～
        </p>

        <div class="list">
        <%= form_for(@feedback, :url => {:action => 'create'}) do |f| %>
        <%= f.text_area :content, :value=>"#{flash[:content]}", :placeholder => "请在这里留下您的宝贵意见......", :maxlength=>230, :style=>'width:80%; height:60px;' %>
        <br/>您的名字：<%= f.text_field :name, :style=>"width: 96px", :value=>"#{flash[:name]||'匿名'}" %> &nbsp;
        您的邮箱（选填）：<%= f.text_field :email, :value=>"#{flash[:email]}", :style=>"width: 160px", :placeholder=>'不对外公开，请放心填写' %>
        <br/><i class="icon-check"></i> <span class="label label-info">为了识别您不是一个机器人，请输入验证码：</span>

        <%= show_simple_captcha %>
        <%= f.submit '发送内容', :class=>'btn btn-primary', :onclick=>'return submit_before();' %>
        <%if(request[:notice]=='vcode_error')%><span class="label label-important">验证码错误</span><%end%>
        <% end %>

        <h3>共有 <span style="color:red; font-weight: bold;"><%=@feedlist.total_entries %></span> 条建议：</h3>

        <% @feedlist.each do |feed| %>
        <div class="item well" style="background:#fff; width:80%; padding:1px 10px; line-height:160%;">
            <div class="user">
                <span style="color:rgb(86,137,0)"><%=feed.name%>：</span>
                <span class="time"><%=feed.created_at.in_time_zone(+8.hours).strftime("%Y-%m-%d %H:%M:%S")%></span>
            <br/><%=raw(feed.content.gsub(/\r\n/, '<br/>'))%>
            </div>
            <% if(feed.reply != nil)%>
            <div class="reply"><span style="color:rgb(204,51,0)">管理员：</span>
                <span class="time"><%=feed.updated_at.in_time_zone(+8.hours).strftime("%Y-%m-%d %H:%M:%S")%></span>
                <br/><%=feed.reply%></div>
            <% end %>
        </div>
        <% end %>

        <div class='flickr_pagination' style="text-align:left;"><%= will_paginate @feedlist, :previous_label => '上页', :next_label => '下页' %></div>
        </div> 

    </div>
</div>


<script type="text/javascript">
$().ready(function(){
    $('.btn').mouseover(function(){
        $(this).addClass('btn_mouseover');
    }).mousedown(function(){
        $(this).addClass('btn_mousedown');
    }).mouseout(function(){
        $(this).removeClass('btn_mouseover').removeClass('btn_mousedown');
    }).mouseup(function(){
        $(this).removeClass('btn_mouseover').removeClass('btn_mousedown');
    });

    $('#feedback_name').focus(function(){
        var s = $(this).val();
        if(s == '匿名') s = '';
        $(this).val(s);
    }).blur(function(){
        if($(this).val() == '') {
            $(this).val('匿名');
        } 
    });

    <% if(flash.keep[:notice] == 'send_successfully') %>
    alert('发送成功，感谢您的反馈。');
    <% end %>
});

// 检查email邮箱
function isEmail(str){
   var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
   return reg.test(str);
}

// 提交前表单检测
function submit_before() {
    var content = $('#feedback_content');
    var name = $('#feedback_name');
    var email = $('#feedback_email');

    if(content.val() == null || content.val().length == 0) {
        alert('请输入内容再发送');
        content.focus();
        return false;
    }

    if(name.val() == null || name.val().length == 0) {
        name.val('匿名');
    }

    if(email.val() != null && email.val().length > 0) {
        if(!isEmail(email.val())) {
            alert('请输入正确的电子邮箱地址');
            email.select();
            return false;
        }
    }

    if($('#vcode').val().length==0) {
        alert('请输入验证问题的正确答案。');
        $('#vcode').select();
        return false;
    }

    return true;
}
</script>